<template>
	<div class="drawing-container">
		<div id="tui-image-editor"></div>
		<canvas id="myCanvas" width="400px" height="400px" style="border: 1px solid black" canvas-id="canvas"></canvas>
		<div>
			<button class="save" @click="type=1">箭头</button>
			<button class="save" @click="type=2">矩形</button>
		</div>
		<br />
		<div>
			<button class="save" @click="save">保存</button>
			<button class="save" @click="cancel">撤销</button>
			<button class="save" @click="cancellation">撤回</button>
			<button class="save" @click="empty">清空</button>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				type: 1, //1
				fromX: 0,
				fromY: 0,
				flag: false,
				myCanvas: null,
				ctx: null,
				canvasWidth: 400,
				canvasHeight: 400,
				canvasPicSrc: "",
				arr: [],
				cancelArr: []
			}
		},
		mounted() {
			let _this = this;
			var canvas = document.querySelector('#myCanvas');
			this.myCanvas = canvas
			this.ctx = canvas.getContext('2d');

			canvas.onmousedown = function(e) {
				_this.fromX = e.layerX
				_this.fromY = e.layerY
				_this.flag = true
			}
			canvas.onmousemove = function(e) {
				if (_this.flag) {
					_this.ctx.clearRect(0, 0, canvas.width, canvas.height)
					_this.drawHistory()
					switch (_this.type) {
						case 1:
							_this.drawLineArrow(_this.fromX, _this.fromY, e.layerX, e.layerY)
							break;
						case 2:
							_this.drawRect(_this.fromX, _this.fromY, e.layerX, e.layerY)
							break;
					}
				}

			}
			canvas.onmouseup = function(e) {
				_this.flag = false
				switch (_this.type) {
					case 1:
						_this.drawLineArrow(_this.fromX, _this.fromY, e.layerX, e.layerY)
						break;
					case 2:
						_this.drawRect(_this.fromX, _this.fromY, e.layerX, e.layerY)
						break;
				}
				_this.arr.push({
					type: _this.type,
					fromX: _this.fromX,
					fromY: _this.fromY,
					toX: e.layerX,
					toY: e.layerY
				})



			}
		},
		methods: {
			drawHistory() {
				for (let item of this.arr) {
					switch (item.type) {
						case 1:
							this.drawLineArrow(item.fromX, item.fromY, item.toX, item.toY)
							break;
						case 2:
							this.drawRect(item.fromX, item.fromY, item.toX, item.toY)
							break;
					}
				}
			},
			drawLineArrow(fromX, fromY, toX, toY) {
				var headlen = 0.2 * 1.41 * Math.sqrt((fromX - toX) * (fromX - toX) + (fromY - toY) * (fromY -
					toY)); //箭头头部长度
				headlen = headlen > 20 ? 20 : headlen; //40是箭头头部最大值
				var theta = 30; //自定义箭头线与直线的夹角
				var arrowX, arrowY; //箭头线终点坐标
				// 计算各角度和对应的箭头终点坐标
				var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI;
				var angle1 = (angle + theta) * Math.PI / 180;
				var angle2 = (angle - theta) * Math.PI / 180;
				var topX = headlen * Math.cos(angle1);
				var topY = headlen * Math.sin(angle1);
				var botX = headlen * Math.cos(angle2);
				var botY = headlen * Math.sin(angle2);
				var toLeft = fromX > toX;
				var toUp = fromY > toY;

				//箭头最上点
				arrowX = toX + topX;
				arrowY = toY + topY;
				//箭头下拐点
				var arrowX1 = toX + botX;
				var arrowY1 = toY + botY;
				//箭头上拐点
				var arrowX2 = toUp ? arrowX + 0.25 * Math.abs(arrowX1 - arrowX) : arrowX - 0.25 * Math.abs(arrowX1 -
					arrowX);
				var arrowY2 = toLeft ? arrowY - 0.25 * Math.abs(arrowY1 - arrowY) : arrowY + 0.25 * Math.abs(arrowY1 -
					arrowY);
				//箭头最下点 
				var arrowX3 = toUp ? arrowX + 0.75 * Math.abs(arrowX1 - arrowX) : arrowX - 0.75 * Math.abs(arrowX1 -
					arrowX);
				var arrowY3 = toLeft ? arrowY - 0.75 * Math.abs(arrowY1 - arrowY) : arrowY + 0.75 * Math.abs(arrowY1 -
					arrowY);

				this.ctx.beginPath();
				//起点-起点，闭合
				this.ctx.moveTo(fromX, fromY);
				this.ctx.lineTo(arrowX2, arrowY2);
				this.ctx.lineTo(arrowX, arrowY);
				this.ctx.lineTo(toX, toY);

				this.ctx.lineTo(arrowX1, arrowY1);
				this.ctx.lineTo(arrowX3, arrowY3);
				this.ctx.lineTo(fromX, fromY);
				this.ctx.closePath();
				this.ctx.strokeStyle = "#ff1e10";
				this.ctx.fillStyle = "#ff1e10";
				this.ctx.fill();
				this.ctx.stroke();

			},
			// 矩形
			drawRect(fromX, fromY, toX, toY) {
				this.ctx.beginPath();
				var tx=toX-fromX
				var ty=toY-fromY
				this.ctx.rect(fromX, fromY, tx, ty)
				this.ctx.strokeStyle = "#ff1e10";
				this.ctx.stroke()
			},
			// // 椭圆
			// drawEllipse(canvas, x, y, a, b, e) {
			// 	canvas.save()
			// 	a = a > 0 ? a : -a
			// :b = b > 0 ? b : -b
			// 	var r = (a > b) ? a : b
			// 	var ratioX = a / r
			// 	var ratioY = b / r
			// 	canvas.scale(ratioX, ratioY)
			// 	canvas.beginPath()
			// 	canvas.moveTo((x + a) / ratioX, y / ratioY)
			// 	canvas.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI)
			// 	canvas.closePath()
			//  canvas.strokeStyle = 'red'
			// 	canvas.stroke()
			// },
			// // 直线
			// drarLine(beginx, beginy, e, canvas) {
			// 	canvas.beginPath()
			// 	canvas.moveTo(beginx, beginy)
			// 	canvas.lineTo(e.layerX, e.layerY)
			// 	canvas.strokeStyle = 'red'
			// 	canvas.stroke()
			// 	canvas.closePath()
			// },
			empty() {
				
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				this.arr=[]
				this.cancelArr=[]
				this.drawHistory()
			},
			cancel() {
				if (this.arr.length == 0) return;
				this.cancelArr.push(this.arr[this.arr.length - 1])
				this.arr.splice(this.arr.length - 1, 1);
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				this.drawHistory()
			},
			cancellation() {
				if (this.cancelArr.length == 0) return;
				this.arr.push(this.cancelArr[this.cancelArr.length - 1])
				this.cancelArr.splice(this.cancelArr.length - 1, 1);
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				this.drawHistory()
			},
			save() {
				const base64String = this.myCanvas.toDataURL() // base64 文件
				console.log('base64String', base64String)
				const data = window.atob(base64String.split(',')[1])
				const ia = new Uint8Array(data.length)
				for (let i = 0; i < data.length; i++) {
					ia[i] = data.charCodeAt(i)
				}
				const blob = new Blob([ia], {
					type: 'image/png'
				}) // blob 文件
				console.log('blob', blob)
				const form = new FormData()
				form.append('image', blob)
				// upload file
			}
		}
	}
</script>
